// 封装组件懒加载复用逻辑
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export function useObserver (apiFn) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // 进入视口 isIntersecting 返回true
      // 进入视口一次后，请求已经发送了一次，应该立刻停止监听
      if (isIntersecting) {
        apiFn()
        // 停止监听
        stop()
      }
    },
    // 刚进入视口区域就立刻执行回调 0 - 1
    { threshold: 0 }
  )
  return {
    target
  }
}
